<template>
    <main-layout title="详情" :showBack='true'>
        <div v-for="item in detail"
            :key="item.key"
            style="padding: 8px 12px; font-size: .7rem;">
            {{item.lable}}：{{item.value}}
        </div>
        <van-steps direction="vertical" :active="remark.length">
            <van-step v-for="it in remark" :key="it.time">
                <h3>{{it.userName}}</h3>
                <h4>{{it.remark}}</h4>
                <p>{{it.time | df}}</p>
            </van-step>
        </van-steps>
    </main-layout>
</template>
<script>
import { purchaseDetailApi } from '../../apis/puchaseApi'
export default {
  data () {
    return {
      detail: [
        { lable: '项目', key: 'projectName', value: '' },
        { lable: '供应商', key: 'supplierName', value: '' },
        { lable: '联系人', key: 'supplierContact', value: '' },
        { lable: '材料', key: 'materialName', value: '' },
        { lable: '状态', key: 'state', value: '' }
      ],
      remark: []
    }
  },
  async mounted () {
    const result = await purchaseDetailApi(this.$route.query.id)
    console.log(result)
    if (result.code === 200) {
      for (const it of this.detail) {
        it.value = result.data[it.key]
      }
      this.remark = result.data.remark.reverse()
    }
  }
}
</script>
